<template>
  <div class="select-none">
    <div class="login-container">
      <div class="img">
        <img src="@/assets/login/illustration.svg" />
      </div>
      <div class="login-box">
        <div class="login-form">
          <img src="@/assets/login/avatar.svg" class="avatar" />
          <h2 class="outline-none">{{ enterpriseName }}</h2>

          <el-form ref="formRef" :model="ruleForm" :rules="rules" size="large">
            <el-form-item prop="username">
              <el-input
                v-model="ruleForm.username"
                clearable
                placeholder="账号"
                prefix-icon="User"
              />
            </el-form-item>

            <el-form-item prop="password">
              <el-input
                v-model="ruleForm.password"
                clearable
                show-password
                placeholder="密码"
                prefix-icon="Lock"
              />
            </el-form-item>

            <el-button
              class="w-full mt-4"
              size="default"
              type="primary"
              @click.prevent="gotoLogin"
              :style="{ width: '100%' }"
            >
              登录
            </el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, defineComponent, onMounted, inject } from "vue";
import { base } from "@/api/index.js";
import { useUserStore } from "@/store";
import { useRouter } from "vue-router";
import enterpriseBgImg from "@/assets/img/login_bg.png";
export default defineComponent({
  components: {},
  setup() {
    //const getImgSrc = inject("$getImgSrc");
    const router = useRouter();
    const { afterLogin } = useUserStore();
    const state = reactive({
      enterpriseName: "",
      enterpriseBgImg: enterpriseBgImg,
      formRef: null,
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    });
    onMounted(() => {
      fetchData();
    });
    const fetchData = async () => {
      const {
        data: {
          settings: { shop_bg_img, shop_name },
        },
      } = await base();
      state.enterpriseName = shop_name;
      if (shop_bg_img) state.enterpriseBgImg = shop_bg_img;
    };
    return {
      ...toRefs(state),
      fetchData,
      //getImgSrc,
      afterLogin,
      router,
    };
  },
  methods: {
    async gotoLogin() {
      this.formRef.validate(async (valid) => {
        if (valid) {
          await this.afterLogin(this.ruleForm);
          this.router.push("/home");
        }
      });
    },
  },
});
</script>
<style lang="scss" scoped>
.select-none {
  background: url("@/assets/login/bg.png") top left no-repeat;
  background-size: 80% 100%;
}
// .wave {
//   position: fixed;
//   height: 100%;
//   width: 80%;
//   left: 0;
//   bottom: 0;
//   z-index: -1;
// }

.login-container {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 18rem;
  padding: 0 2rem;
}

.img {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.img img {
  width: 500px;
}

.login-box {
  display: flex;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.login-form {
  width: 360px;
}

.avatar {
  width: 350px;
  height: 80px;
}

.login-form h2 {
  text-transform: uppercase;
  margin: 15px 0;
  color: #999;
  font: bold 200% Consolas, Monaco, monospace;
}

@media screen and (max-width: 1180px) {
  .login-container {
    grid-gap: 9rem;
  }

  .login-form {
    width: 290px;
  }

  .login-form h2 {
    font-size: 2.4rem;
    margin: 8px 0;
  }

  .img img {
    width: 360px;
  }

  .avatar {
    width: 280px;
    height: 80px;
  }
}

@media screen and (max-width: 968px) {
  .wave {
    display: none;
  }

  .img {
    display: none;
  }

  .login-container {
    grid-template-columns: 1fr;
  }

  .login-box {
    justify-content: center;
  }
}

:deep(.el-input-group__append, .el-input-group__prepend) {
  padding: 0;
}
</style>
